<template>
  <div class="vt-skus">
    <div class="vt-skus-header flx mb15">
      <div class="mr20">
        <img :src="skuImg" class="w110 h110" alt="">
      </div>
      <div>
        <p class="fwb fz16 mb5">{{proDetail.title}}</p>
        <p class="clr2 fz16 mb10">￥{{skuPrice}}</p>
        <p class="clr7 fz12">{{skuTxt}}</p>
      </div>
    </div>
    <div class="vt-forms">
      <div v-for="(val, key) in dims" :key="key">
        {{ val }}：
        <div class="flx flx-w-w mt5">
          <vtButton
            v-for="(i, n) in allDimension[key]"
            :key="n"
            :type="checked[key] === i ? 'type1-plain' : 'type11'"
            :disable="disabled(key,i)"
            @click.native="onCheck(key, i)"
            ele="span"
            class="mb10 mr15"
          >
            {{i}}
          </vtButton>
        </div>
      </div>
    </div>
    <div class="vt-counter flx-bm">
      <span>数量：</span>
      <AMbutton :count="count" @click-minus="clickMinus" @click-add="clickAdd" />
    </div>
  </div>
</template>

<script>
  import {myTools} from "../../../../jsTools/jsTools"
  import vtButton from 'assets/myTools/vueTools/com/common/button/button'
  import AMbutton from 'assets/myTools/vueTools/com/common/cart2/add-min-button/add-min-button'
  export default {
    components: {
      vtButton,
      AMbutton
    },
    props: {
      skus: {
        type: Array,
        default() {
          return []
        }
      },
      dims: {
        type: Object,
        default () {
          return {}
        }
      },
      proDetail: {
        type: Object,
        default(){
          return {}
        }
      }
    },
    data() {
      return {
        allDimension: {},
        avaliableSkus: [],
        avaliableDims: {},
        avaliableSkusGroup: [], // 抽取可用skus的维度数组,并对应skuid
        avaliableGroupMap: {}, // 求幂，并对应skuid
        checked: {},
        count: 1,
      }
    },
    created() {
      this.allDimension = this.dealDimension(this.skus, this.dims)
      this.avaliableSkus = this.dealAvaliableSkus(this.skus)
      this.avaliableDims = this.dealDimension(this.avaliableSkus, this.dims)
      this.avaliableSkusGroup = this.dealAvaliableSkusGroup(this.avaliableSkus, this.dims)
      this.avaliableGroupMap = this.dealAvaliableGroupMap(this.avaliableSkusGroup)
      this.checked = this.dealChecked(this.dims)
    },
    computed: {
      path() {
        let path = ''
        for(let i in this.checked) {
          path = path + this.checked[i]
        }
        return path
      },
      skuId() {
        let id, arr
        arr = this.avaliableGroupMap[this.path]
        if(arr.length === 1) {
          return arr[0]
        }else{
          return false
        }
      },
      skuImg() {
        let img, arr
        arr = this.avaliableGroupMap[this.path]
        if(arr.length === 1) {
          let idx = myTools.arrSomeItem(this.skus, 'id', arr[0])
          img = this.skus[idx].image
        }else{
          img = this.skus[0].image
        }
        return img
      },
      skuPrice() {
        let price, arr
        arr = this.avaliableGroupMap[this.path]
        if (arr.length === 1) {
          let idx = myTools.arrSomeItem(this.skus, 'id', arr[0])
          price = this.skus[idx].price
        } else {
          let priceArr, min, max
          priceArr = []
          this.skus.forEach(i=>{
            priceArr.push(i.price)
          })
          min = Math.min.apply(null, priceArr)
          max = Math.max.apply(null, priceArr)

          if(min === max) {
            price = myTools.checkFloat(min,2)
          }else{
            price = myTools.checkFloat(min,2) + ' - ' + myTools.checkFloat(max,2)
          }

        }
        return price
      },
      skuTxt() {
        let txt, cache = true, category = []
        for(let i in this.checked) {
          if(this.checked[i] === '') {
            cache = false
            category.push(i)
          }
        }

        if(Object.keys(this.dims).length === 0) {
			txt = ''
		}else{
			if(!cache) {
			  txt = '请选择'
			  for(let i in this.dims) {
				let temp = myTools.arrSome(category, i)
				if (temp !== false) {
				  txt = txt + '"' + this.dims[i] + '"'
				}
			  }
			}else{
			  txt = '已选择'
			  for(let i in this.checked) {
				txt = txt + '"' + this.checked[i] + '"'
			  }
			}
		}
        return txt
      }
    },
    methods: {
      dealDimension(skus, dims) {
        let obj = {}
        for (let i in dims) {
          obj[i] = []
          skus.forEach(j => {
            if(j[i] !== '' && myTools.arrSome(obj[i], j[i]) === false) {
              obj[i].push(j[i])
            }
          })
        }
        return obj
      },
      dealAvaliableSkus(skus) {
        let arr = []
        skus.forEach(i => {
          if(i.stock > 0){  // 判断是否可购买
            arr.push(i)
          }
        })
        return arr
      },
      dealChecked(dims) {
        let obj = {}
        for(let i in dims) {
          obj[i] = ''
        }
        return obj
      },
      dealAvaliableSkusGroup(avaSkus, dims) {
        let arr = []
        avaSkus.forEach( i => {
          let obj = {}
          obj.skuid = i.id  // skuid与Group对应
          obj.arr = []
          for( let j in dims ) {
            obj.arr.push(i[j])
          }
          arr.push(obj)
        })
        return arr
      },
      dealAvaliableGroupMap(group) {
        let obj = {}
        group.forEach(i => {
          let arr = myTools.powerset(i.arr)
          arr.forEach(j => {
            if(!obj[j.join('')]) {  //直接拼接，方便后面拼接路径
              obj[j.join('')] = [i.skuid]  // 将每个路径以“-”拼接，并赋值skuid
            }else{
              obj[j.join('')].push(i.skuid)  // 如果这个路径存在，则push skuid进去
            }
          })
        })
        return obj
      },
      onCheck (category, val) {
        if (!this.disabled(category, val)){
          if (this.checked[category] === val) {
            this.checked[category] = ''
          } else {
            this.checked[category] = val
          }
        }
        this.$emit('sku-check', {
          id: this.skuId,
          count: this.count,
          txt: this.skuTxt
        })
      },
      disabled(category, val){
        if (myTools.arrSome(this.avaliableDims[category], val) === false) {
          return true
        }else{
          let path = ''
          let obj = {}
          Object.assign(obj, this.checked)
          obj[category] = val
          for(let i in obj){
            path = path + obj[i]
          }
          return !this.avaliableGroupMap[path]
        }
      },
      clickMinus() {
        if(this.count>1) {
          this.count --
        }
        this.$emit('sku-check', {
          id: this.skuId,
          count: this.count,
          txt: this.skuTxt
        })
      },
      clickAdd() {
        this.count ++
        this.$emit('sku-check', {
          id: this.skuId,
          count: this.count,
          txt: this.skuTxt
        })
      }
    }
  }
</script>

<style scoped>

</style>
